<template>
  <div style="background-color: #fff; position: relative">
    <!-- 产品表信息录入 -->
    <!-- 自己信息 -->
    <div>
      <ul>
        <li style="padding: 10px 16px; background: #f2f1f6; font-size: 16px">
          一级代理
        </li>
        <li>
          <van-field v-model="agentname" readonly>
            <span slot="label">姓名：</span>
          </van-field>
        </li>
        <li>
          <van-field v-model="agentphone" readonly>
            <span slot="label">手机：</span>
          </van-field>
        </li>
        <li>
          <van-field v-model="agenteam" readonly>
            <span slot="label">归属团队：</span>
          </van-field>
        </li>
      </ul>
    </div>

    <van-cell-group label-align="right">
      <!-- 客户信息 -->
      <div style="padding: 10px 16px; background: #f2f1f6; font-size: 16px">
        客户信息
      </div>
      <van-field
        placeholder="请输入代理名称"
        :maxlength="20"
        v-model="title"
        required
        validate-first
        name="pattern"
        label-align="center"
        @input="teamChange"
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">姓&#12288;&#12288;名：</span>
      </van-field>
      <van-field
        placeholder="请输入客户手机号"
        v-model="agent"
        required
        type="number"
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">手机号：</span>
      </van-field>
      <van-field
        label="类型："
        v-model="address_detail"
        required
        @click="staterly(1)"
      >
        <span slot="input">
          <span>{{ typext == '' ? '请选择类型' : typext }}</span>
          &#12288;
        </span>
      </van-field>
      <!-- 产品信息 -->
      <div style="padding: 10px 16px; background: #f2f1f6; font-size: 16px">
        产品信息
      </div>
      <van-field label="下单日期：" v-model="address_detail" required>
        <span slot="input">
          <span @click="showTime('bg')">{{
            start_date == '' ? '请选择下单日期' : start_date
          }}</span>
          &#12288;
        </span>
      </van-field>
      <van-field label="发货日期：" v-model="address_detail" required>
        <span slot="input">
          <span @click="showTime('cg')">{{
            startate == '' ? adtime.slice(0, 10) : startate
          }}</span>
          &#12288;
        </span>
      </van-field>
      <van-field
        label="产品名称："
        v-model="address_detail"
        required
        @click="staterly(3)"
      >
        <span slot="input">
          <span>{{ proname == '' ? '请选择产品名称' : proname }}</span>
          &#12288;
        </span>
      </van-field>

      <van-field
        placeholder="请输入数量"
        v-model="anumber"
        required
        type="number"
        @input="changeinput"
        label-align="center"
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：</span>
      </van-field>
      <van-field label="单位：" v-model="address_detail" required>
        <span slot="input">
          <span @click="staterly(2)">{{
            unit == '' ? '请选择产品单位' : unit
          }}</span>
          &#12288;
        </span>
      </van-field>
      <van-field
        placeholder="请输入价格"
        v-model="pice"
        required
        type="number"
        @input="changeinput"
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">市场价格：</span>
      </van-field>
      <van-field
        placeholder="总价(元)"
        v-model="Talpice"
        readonly
        label-align="center"
        error
      >
        <span slot="label">总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：</span>
      </van-field>

      <van-field
        placeholder="请输入已收定金"
        v-model="deposit"
        type="number"
        label-align="center"
        @input="changedep"
        required
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">已收定金：</span>
      </van-field>
      <van-field
        placeholder="代收尾款(元)"
        v-model="blanace"
        type="number"
        readonly
        label-align="center"
        error
      >
        <span slot="label">代收尾款：</span>
      </van-field>

      <!-- 物流信息 -->

      <div style="padding: 10px 16px; background: #f2f1f6; font-size: 16px">
        物流信息
      </div>
      <van-field label="物流公司：" v-model="address_detail" required>
        <span slot="input">
          <span @click="staterly(4)">{{
            stics == '' ? '请选择物流公司' : stics
          }}</span>
          &#12288;
        </span>
      </van-field>
      <van-field
        placeholder="请填写物流单号"
        v-model="picely"
        @input="changeinput"
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">物流单号：</span>
      </van-field>

      <div
        style="
          margin: 10px 16px;
          border: 1px solid #ebedf0;
          background-color: #fff;
          margin-bottom: 20px;
        "
      >
        <van-field
          class="useddetail"
          v-model="detail"
          rows="2"
          autosize
          type="textarea"
          maxlength="300"
          placeholder="可填写备注信息"
          show-word-limit
        />
      </div>

      <div style="padding: 0 16px">
        <van-button
          style="
            background-color: #ee3f00;
            width: 100%;
            color: #fff;
            font-size: 18px;
            margin-bottom: 35px;
          "
          @click="savePublish"
          >确定</van-button
        >
      </div>

      <!-- 下单日期 -->
      <van-popup v-model="showtime" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="timeConfirm"
          type="date"
        />
      </van-popup>
      <!-- 发货日期 -->
      <van-popup v-model="showtimely" position="bottom">
        <van-datetime-picker
          v-model="sentDate"
          @confirm="timeConfirm"
          type="date"
        />
      </van-popup>
      <!-- 状态 -->
      <van-popup v-model="showstaty" position="bottom">
        <van-picker
          title="状态"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          type="string"
        />
      </van-popup>
      <!-- 类型 -->
      <van-popup v-model="showstype" position="bottom">
        <van-picker
          title="类型"
          show-toolbar
          :columns="types"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          type="string"
        />
      </van-popup>
      <!-- 单位 -->
      <van-popup v-model="showunit" position="bottom">
        <van-picker
          title="单位"
          show-toolbar
          :columns="unitumns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          type="string"
        />
      </van-popup>
      <!-- 产品名称 -->
      <van-popup v-model="showprona" position="bottom">
        <van-picker
          title="产品名称"
          show-toolbar
          :columns="prolist"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          type="string"
        />
      </van-popup>
      <!-- 物流公司 -->
      <van-popup v-model="logistics" position="bottom">
        <van-picker
          title="物流公司"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          type="string"
        />
      </van-popup>
    </van-cell-group>

    <van-tabbar
      v-model="active"
      style="position: fixed; bottom: 0px"
      v-show="jiejue"
    >
      <van-tabbar-item
        v-for="(tab, index) in tabb"
        :icon="tab.icon"
        :to="tab.path"
        :dot="tab.dot"
        :info="tab.info"
        :key="index"
        >{{ tab.name }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

  

<script>
import timeIno from '@/views/info/timeIno';
import areaList from '@/views/user/module-address-edit/area_all.json';
import {
  Image,
  Row,
  Col,
  Field,
  Button,
  Popup,
  Area,
  Stepper,
  Uploader,
  Toast,
  DatetimePicker,
  Dialog,
  Picker,
  Tab,
  Tabs,
  Tabbar,
  TabbarItem,
} from 'vant';
import {
  storageUpload,
  projectSave,
  dicItems,
  projectDetail,
  projectUpdate,
  authInfo,
  livery,
  prts,
  qulifi,
  byGroupId,
} from '@/api/api';

import camera_icon from '@/assets/images/icons/camera_icon.png';
import myCropper from '@/views/common/my-cropper';
// import shet from '@/components/sheet';
import { getLocalStorage, setLOcalStorage } from '@/utils/local-storage';
export default {
  name: 'project-publish',

  data() {
    return {
      jiejue: true,
      picely: '',
      active: 0,
      agentname: '邹梦华',
      agentphone: 15950607579,
      agenteam: '党员',
      sentDate: '',
      uesname: '',
      protuname: '',
      anumber: '',
      blanace: '',
      deposit: '',
      pice: '',
      Talpice: '',
      Astately: '',
      showstaty: false,
      showstype: false,
      typext: '',
      proname: '',
      showunit: false,
      showprona: false,
      logistics: false,
      showtimely: false,
      stately: '',
      agent: '',
      userLevel: 0,
      camera_icon: camera_icon,
      title: '',
      show: false,
      show_upload: false,
      showtime: false,
      minDate: new Date(),
      currentDate: new Date(),
      columns: [],
      types: [],
      prolist: [],
      unitumns: [],
      unit: '',
      stics: '',
      startate: '',
      adtime: '',
      staff: 0,
      start_date: '',
      end_date: '',
      unit_price: '',
      address: '',
      address_detail: '',
      detail: '',
      userId: getLocalStorage('userId').userId,
      project_userId: '',
      status: -1,
      show_cropper: false,
      active: 0,
      showtabbar: true,
      tabb: [
        {
          name: '产品表',
          path: '/record/product',
          pathName: 'product',
          icon: 'newspaper-o',
          // dot: false,
          info: '',
        },
        {
          name: '配件表',
          path: '/record/parts',
          pathName: 'parts',
          icon: 'hot-o',
          // dot: false,
          info: '',
        },

        {
          name: '资格表',
          path: '/record/qualifications',
          pathName: 'qualifications',
          icon: 'vip-card-o',
          // dot: false,
          info: '',
        },
      ],
    };
  },
  watch: {
    Talpice() {
      if (this.Talpice == '' || this.deposit == '') {
        // alert(1);
        this.blanace = '';
        return;
      } else if (this.Talpice != '' && this.deposit != '') {
        this.blanace = this.Talpice - this.deposit;
      }
    },
  },
  created() {
    byGroupId({ groupId: 'TODAY_RECORD_TYPE' }).then((res) => {
      let listype = res.data.data.list;
      listype.forEach((element) => {
        this.types.push(element.itemName);
      });
    });
    byGroupId({ groupId: 'TODAY_RECORD_LOGISTICS' }).then((res) => {
      let logistics = res.data.data.list;
      logistics.forEach((element) => {
        this.columns.push(element.itemName);
      });
    });
    byGroupId({ groupId: 'TODAY_RECORD_COMPANY' }).then((res) => {
      let company = res.data.data.list;
      company.forEach((element) => {
        this.unitumns.push(element.itemName);
      });
    });
    byGroupId({ groupId: 'TODAY_RECORD_PRODUCT' }).then((res) => {
      let product = res.data.data.list;
      product.forEach((element) => {
        this.prolist.push(element.itemName);
      });
    });
    authInfo().then((res) => {
      this.agentname = res.data.data.name;
      this.agentphone = res.data.data.mobile;
      this.agenteam = res.data.data.ttmallMerchant;
    });
    let fmte = 'YYYY-mm-dd 00:00:00';
    let ret;
    let addtime = new Date();
    const opt = {
      'Y+': addtime.getFullYear().toString(), // 年
      'm+': (addtime.getMonth() + 1).toString(), // 月
      'd+': addtime.getDate().toString(), // 日
      'H+': addtime.getHours().toString(), // 时
      'M+': addtime.getMinutes().toString(), // 分
      'S+': addtime.getSeconds().toString(), // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
      ret = new RegExp('(' + k + ')').exec(fmte);
      if (ret) {
        fmte = fmte.replace(
          ret[1],
          ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
        );
      }
    }

    this.adtime = fmte;
  },
  methods: {
    teamChange() {},
    jie() {
      // this.jiejue = false;
    },
    jue() {
      // this.jiejue = true;
    },
    savePublish() {
      console.log(this.currentDate, '下单');
      console.log(this.sentDate, '发货');
      // return;
      let rightPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
      if (this.title == '') {
        Toast('请输入客户名称');
        return;
      }
      if (!rightPhone.test(this.agent)) {
        Toast('请正确输入客户手机号');
        return;
      }
      if (this.typext == '') {
        Toast('请选择类型');
        return;
      }
      if (this.start_date == '') {
        Toast('请选择下单日期');
        return;
      }
      // if (this.startate == '') {
      //   Toast('请选择发货日期');
      //   return;
      // }
      if (this.proname == '') {
        Toast('请选择产品名称');
        return;
      }
      if (this.anumber == '') {
        Toast('请输入数量');
        return;
      }
      if (this.unit == '') {
        Toast('请选择产品单位');
        return;
      }

      if (this.pice == '') {
        Toast('请输入市场价格');
        return;
      }
      if (this.deposit == '') {
        Toast('请输入已收定金');
        return;
      }
      if (this.stics == '') {
        Toast('请选择物流公司');
        return;
      }
      // if (this.picely == '') {
      //   Toast('请输入物流号');
      //   return;
      // }

      livery({
        stauts: 1,
        customertel: this.agent,
        teamname: this.agenteam,
        managername: this.agentname,
        customername: this.title,
        moneyTotal: Number(this.Talpice),
        moneyDeposit: Number(this.deposit),
        moneyBalance: Number(this.blanace),
        beginTime: this.dateFormat('YYYY-mm-dd 00:00:00', this.currentDate),
        placeTime:
          this.sentDate == ''
            ? this.adtime.slice(0, 10)
            : this.dateFormatly('YYYY-mm-dd ', this.sentDate),
        addTime: this.adtime,
        logistics:
          this.stics == '自提'
            ? 1
            : this.stics == '安能'
            ? 2
            : this.stics == '德邦'
            ? 3
            : this.stics == '中通'
            ? 4
            : this.stics == '京东'
            ? 5
            : this.stics == '顺丰'
            ? 6
            : null,
        logisticsOrder: this.picely,
        managertel: this.agentphone,
        customertype: this.typext,
        company: this.unit == '个' ? 1 : this.unit == '件' ? 2 : null,
        remark: '',
        name: this.proname,
        userId: Number(this.userId),
        num: Number(this.anumber),
        money: Number(this.pice),
      }).then((res) => {
        console.log(res);
        if (res.data.errmsg == '') {
          Toast('提交失败！请检查提交文本或网络');
          return;
        }
      });
      Toast('已提交,请等待审核结果');
      setTimeout(() => {
        this.$router.push({ path: '/user/business/card' });
      }, 1000);
    },

    // 函数与数据名称不能重名
    // 状态选择
    staterly(id) {
      if (id == 1) {
        this.showstype = true;
        return;
      }
      if (id == 2) {
        this.showunit = true;
        return;
      }
      if (id == 3) {
        this.showprona = true;
        return;
      }
      if (id == 4) {
        this.logistics = true;
        return;
      }
      this.showstaty = true;
    },
    // 总金额
    changeinput() {
      if (this.anumber == '' || this.pice == '') {
        this.Talpice = '';

        return;
      } else if (this.anumber != '' && this.pice != '') {
        this.Talpice = this.anumber * this.pice;
      }
    },

    // 尾款
    // 定金Deposit
    changedep() {
      // replace()用于替换一些字符串
      // let rot = new RegExp(/\D|^0/g);
      // if (rot.test(this.deposit)) {
      //  this.deposit.replace(rot,'');
      // }
      if (Number(this.deposit) > Number(this.Talpice)) {
        Toast('定金不能大于总价！');
        return;
      }
      if (this.deposit != '' && this.anumber == '') {
        Toast('请先输入数量');
        return;
      }
      if (this.deposit != '' && this.pice == '') {
        Toast('请先输入价格');
        return;
      }
      if (this.deposit < 0) {
        Toast('定金不能小于0！');
        return;
      }
      if (this.deposit == '') {
        this.blanace = '';
        return;
      } else {
        this.blanace = this.Talpice - this.deposit;
      }
    },
    // tap点击确定触发
    onConfirm(value, index, item) {
      if (this.showstype) {
        this.typext = value;
        this.showstype = false;
        return;
      }

      if (this.showprona) {
        this.proname = value;
        this.showprona = false;
        return;
      }

      if (this.showunit) {
        this.unit = value;
        this.showunit = false;
        return;
      }
      if (this.logistics) {
        this.stics = value;
        this.logistics = false;
        return;
      }

      if (index == 1) {
        this.stately = '自提';
      } else {
        this.stately = '发货';
      }

      this.showstaty = false;
    },
    // 移动触发
    onChange(picker, value, index) {},
    // 点击取消触发
    onCancel() {
      this.showstype = false;

      this.showunit = false;

      this.showprona = false;

      this.logistics = false;

      this.showstaty = false;
    },

    // 时间格式划
    dateFormat(fmte, date) {
      let ret;
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmte);
        if (ret) {
          fmte = fmte.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          );
        }
      }

      return fmte;
    },
    dateFormatf(fmte, date) {
      let ret;
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmte);
        if (ret) {
          fmte = fmte.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          );
        }
      }
      return fmte;
    },
    dateFormatly(fmt, date) {
      let ret;
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        // 'H+': date.getHours().toString(), // 时
        // 'M+': date.getMinutes().toString(), // 分
        // 'S+': date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          );
        }
      }
      return fmt;
    },

    initwkTypeSelected() {
      for (let i in this.wkTypes) {
        this.wkTypeSelected.push(this.workType[this.wkTypes[i]]);
      }
    },
    getAddressByDistrictCode(district_code) {
      if (
        district_code == undefined ||
        district_code == null ||
        district_code == ''
      ) {
        return '地区未知';
      }
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return province_name + city_name + district_name;
    },
    convertImgToBase64(imageFile, callback, errorCallback) {
      try {
        let reader = new FileReader();
        reader.readAsDataURL(imageFile);
        reader.onload = function (e) {
          if (callback) {
            let base64Str = e.target.result;
            callback(base64Str);
          }
        };
      } catch (error) {
        console.error(error);
        if (errorCallback) {
          errorCallback(error);
        }
      }
    },
    changeInputFile(event) {
      var files = event.target.files;
      if (!files.length) {
        return;
      }
      files = files.length === 1 ? files[0] : [].slice.call(files);
      if (files) {
        this.convertImgToBase64(files, (base64Str) =>
          this.convertCb(base64Str)
        );
        this.cropper_originName = files.name;
      }
    },

    changeDefaultImg(imgUrl) {
      this.chosed_default_img = imgUrl;
    },
    confirmDefaultImg() {
      this.img_url = this.chosed_default_img;
      this.show_default_img = false;
    },
    showDefaultImg() {
      this.show_default_img = true;
    },
    selectWkType(option) {
      return true;
    },

    showPopup() {
      this.show = true;
    },
    hidePopup() {
      this.show = false;
    },
    timeConfirm(value) {
      if (this.time_type == 'bg') {
        this.start_date = this.timeFormat(value);
        this.showtime = false;
        return;
      } else {
        this.end_date = this.timeFormat(value);
      }
      if (this.time_type == 'cg') {
        this.startate = this.timeFormat(value);
        this.showtimely = false;
        return;
      } else {
        this.end_date = this.timeFormat(value);
      }
    },
    showTime(type) {
      this.time_type = type;
      if (this.time_type == 'bg') {
        if (this.start_date != '') {
          this.currentDate = new Date(this.start_date);
        }
        this.showtime = true;
        return;
      }
      if (this.time_type == 'cg') {
        if (this.startate != '') {
          this.sentDate = new Date(this.startate);
        }
        this.showtimely = true;
        return;
      }
    },
    timeFormat(time) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }

      return year + '-' + month + '-' + day;
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [Uploader.name]: Uploader,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [Stepper.name]: Stepper,
    [DatetimePicker.name]: DatetimePicker,
    [myCropper.name]: myCropper,
    [Dialog.Component.name]: Dialog.Component,
    timeIno,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    // shet
  },
};
</script>
<style lang="scss" scoped>
/deep/.van-field__label--center {
  text-align: left !important;
}
.van-field__label {
  width: 27%;
  text-align: center;
}
// .van-cell {
//   font-size: 2vh;
// }
.van-ellipsis {
  font-size: 14px;
}
.chose_default_button {
  display: inline-block;
  width: 80px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #fff;
  font-size: 10px;
  color: #fff;
}
.deault_images_one {
  position: relative;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 99% 99%;
  -moz-background-size: 99% 99%;
  float: left;
  border-radius: 18px 18px 18px 18px;
}
.deault_images_two {
  position: relative;
  width: 50%;
  float: left;
  padding-bottom: 50%;
  border: 1px solid #fff;
}
.deault_images_0 {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.deault_images_1 {
  position: absolute;
  top: 0;
  left: 25%;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.deault_images_2 {
  position: absolute;
  top: 25%;
  left: 0;
  margin-top: 25%;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.deault_images_3 {
  position: absolute;
  top: 25%;
  left: 25%;
  margin-left: 25%;
  margin-top: 25%;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.confirm_button {
  display: inline-block;
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #fff;
}
.deault_images_others {
  text-align: center;
  width: 25%;
  padding-bottom: 25%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
/deep/ .vs__dropdown-toggle {
  border-radius: 0;
}
.view-router {
  padding-bottom: 20px;
}
.work_type {
  overflow: visible;
}
.work_type /deep/ .van-cell__value {
  overflow: visible;
}
/deep/ .vs__selected {
  background-color: #ee3f00;
  color: #fff;
  border: 0;
}
/deep/ .vs__deselect {
  fill: #fff;
}
</style>
